{% extends "staff/base.html" %}
{% import 'staff/_formhelpers.html' as forms with context%}
{% import 'staff/_helpers.html' as helpers %}

{% block title %} {{ assignment.display_name }} Stats - {{ current_course.display_name_with_semester }}{% endblock %}

{% block main %}
  <section class="content-header">
      <h1>
        {{ assignment.display_name }} Stats
        <small>{{ current_course.offering }}</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="{{ url_for("admin.course", cid=current_course.id) }}">
            <i class="fa fa-university"></i> {{ current_course.offering }}
        </a></li>
        <li><a href="{{ url_for('.course_assignments', cid=current_course.id) }}">
          <i class="fa fa-list"></i> Assignments</a>
        </li>
        <li> <a href="{{ url_for('.assignment', cid=current_course.id, aid=assignment.id) }}"><i class="fa fa-book"></i> {{ assignment.display_name }} </a></li>
        <li class="active hidden-xs"><a href="#"><i class="fa fa-bar-chart"></i> Stats </a></li>
      </ol>
  </section>

  <section class="content">
    {% include 'alerts.html' %}
    <!-- Stats Row -->
    <div class="row">

        <div class="col-md-3 col-sm-6 col-xs-6">
          <div class="info-box">
            <a href="{{ url_for('.assignment_stats', cid=current_course.id, aid=assignment.id) }}">
              <span class="info-box-icon bg-green">
                <i class="fa fa-inbox"></i>
              </span>
            </a>
            <div class="info-box-content">
              <span class="info-box-text">Submitted</span>
              <span class="info-box-number">{{ stats['students_with_subm'] }}</span>

              <div class="progress">
                <div class="progress-bar bg-green" style="width: {{ stats['percent_finished'] | round(1) | int }}%"></div>
              </div>
              <span class="progress-description">
                {{ stats['percent_finished'] | round(1) }}% have submitted
              </span>
            </div>
            <!-- /.info-box-content -->
          </div>

        </div>

        <div class="col-md-3 col-sm-6 col-xs-6">
          <div class="info-box">
           <a href="{{ url_for('.assignment_stats', cid=current_course.id, aid=assignment.id) }}">
            <span class="info-box-icon bg-yellow">
              <i class="fa fa-folder-open-o"></i>
            </span>
           </a>
            <div class="info-box-content">
              <span class="info-box-text">Started</span>
              <span class="info-box-number">{{ stats['students_with_subm'] + stats['students_with_backup'] }}</span>

              <div class="progress">
                <div class="progress-bar bg-yellow" style="width: {{ stats['percent_started'] | round(1) | int }}%"></div>
              </div>
              <span class="progress-description">
                {{ stats['percent_started'] | round(1) }}% have started
              </span>
            </div>
            <!-- /.info-box-content -->
          </div>
        </div>


        <div class="col-md-3 col-sm-6 col-xs-6">
          <div class="info-box">
           <a href="{{ url_for('.assignment_stats', cid=current_course.id, aid=assignment.id) }}">
            <span class="info-box-icon bg-aqua"><i class="fa fa-file-code-o"></i></span>
            </a>
            <div class="info-box-content">
              <span class="info-box-text">Unique Submissions</span>
              <span class="info-box-number"> {{ stats['unique_submissions'] }}</span>
              <span class="progress-description">
                (Includes backups)
              </span>

            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-6">
          <div class="info-box">
           <a href="{{ url_for('.assignment_stats', cid=current_course.id, aid=assignment.id) }}">
            <span class="info-box-icon bg-teal">
              <i class="fa fa-users"></i>
            </span>
          </a>
            <div class="info-box-content">
              <span class="info-box-text">Active Groups</span>
              <span class="info-box-number">{{ stats['active_groups'] }}</span>

              <div class="progress">
                <div class="progress-bar bg-teal" style="width: {{ (stats['percent_groups_active']*100) | round(1) | int }}%"></div>
              </div>
              <span class="progress-description">
                {{ stats['groups'] - stats['active_groups'] }} {{ (stats['groups'] - stats['active_groups']) | pluralize('is', 'are')}} still pending
              </span>
            </div>
            <!-- /.info-box-content -->
          </div>
        </div>
        <!-- /.col -->
      </div>
    <div class="row">
        <div class="col-md-3 col-sm-12">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">Stats</h3>
                </div>
                <div class="box-body">
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="description-block border-bottom">
                        <h5 class="description-header">{{ stats['students_with_subm'] }}</h5>
                        <span class="description-text">Students with submissions</span>
                      </div>
                      <!-- /.description-block -->
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="description-block border-bottom">
                        <h5 class="description-header">{{ stats['students_with_backup'] }}</h5>
                        <span class="description-text">Students with only backups</span>
                      </div>
                      <!-- /.description-block -->
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="description-block border-bottom">
                        <h5 class="description-header">{{ stats['students_no_backup'] }}</h5>
                        <span class="description-text">Students without submissions</span>
                      </div>
                      <!-- /.description-block -->
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="description-block border-bottom">
                        <h5 class="description-header">{{ stats['active_groups'] }}</h5>
                        <span class="description-text">Active Groups</span>
                      </div>
                      <!-- /.description-block -->
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="description-block border-bottom">
                        <h5 class="description-header">{{ stats['unique_submissions'] }}</h5>
                        <span class="description-text">Submissions to grade</span>
                      </div>
                      <!-- /.description-block -->
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-sm-12">
                      <div class="description-block border-bottom">
                        <h5 class="description-header">{{ stats['backups'] }}</h5>
                        <span class="description-text">Total Backups</span>
                      </div>
                      <!-- /.description-block -->
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="description-block border-bottom">
                        <h5 class="description-header">{{ stats['submissions'] }}</h5>
                        <span class="description-text">Total Submissions</span>
                      </div>
                      <!-- /.description-block -->
                    </div>
                  </div>
                </div>
                <!-- /.box-body -->
            <!-- /.box -->
            </div>
        <!-- /.col -->
        </div>

        <div class="col-xs-12 col-md-9">
          <div class="box box-solid">
            <div class="box-header">
              <i class="fa fa-bar-chart-o"></i>

              <h3 class="box-title">{{ assignment.display_name }} Charts</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-default btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
                <button type="button" class="btn btn-default btn-sm" data-widget="remove"><i class="fa fa-times"></i>
                </button>
              </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <div class="row">
                <div class="col-xs-12">
                    {{ subm_chart.render() | safe }}
                </div>
              </div>

              </div>
              <!-- /.row -->
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <div class="row">
          <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title"><span> Submissions</span></h3>

                    <div class="box-tools">
                        <div class="pull-left" id="submissions-loading">
                          <i class="fa fa-circle-o-notch fa-spin fa-2x"></i>
                          <span class="sr-only">Loading...</span>
                        </div>

                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                                <i class="fa fa-minus"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- /.box-header -->
                <div class="box-body table-responsive no-padding table-loading" style="display: none;" id="submissions-list">
                    <table class="table table-hover">
                        <thead>
                            <th class="sort" data-sort="identifier">Submitter</th>
                            <th class="sort" data-sort="group">Group</th>
                            <th class="sort" data-sort="final-subm-id">Code</th>
                            <th class="sort" data-sort="created">Timestamp</th>
                            <th class="sort" data-sort="submit">Status</th>
                            <th>Actions</th>
                        </thead>

                        <tbody class="list">
                            {%- for item in submissions %}
                            <tr>
                                <td class="identifier" data-email="{{item['user']['email']}}" data-name="{{item['user']['name']}}">
                                <a href="{{ url_for('.student_assignment_detail', cid=current_course.id, email=item['user']['email'], aid=assignment.id)}}">
                                    {{ item['user']['email'] }}
                                    <!-- {{ item['user']['name'] }}-->
                                </a>
                                </td>
                                {% if item['group'] %}
                                  <td class="group">
                                    {% if item['group']['group_member_emails'] %}
                                      {% set user_list = item['group']['group_member_emails'] %}
                                      {% for member in user_list %}
                                        {% if member != item['user']['email'] %}
                                        <a href="{{ url_for('.student_assignment_detail', cid=current_course.id, email=member, aid=assignment.id) }}">
                                        {{ member }}
                                        </a>
                                        {% endif %}

                                      {% endfor %}
                                    {% else %}
                                      <span class="label label-default">Pending</span>
                                    {% endif %}
                                  </td>
                                {% else %}
                                  <td class="group">&mdash;</td>
                                {% endif %}

                                {% if item['backup'] %}
                                  <td class="final-subm-id">
                                    {{ helpers.backup_link(item['backup']['id']) }}
                                  </td>
                                  <td class="created" data-time="item['backup']['created']">{{ utils.local_time_obj(item['backup']['created'], current_course) }}
                                  </td>

                                  <td class="submit">
                                    {% if item['backup']['flagged'] %}
                                      <span class="label label-success">Flagged</span>
                                    {% elif item['backup']['submit'] %}
                                      <span class="label label-primary">Submission</span>
                                    {% else %}
                                      <span class="label label-info">Backup</span>
                                    {% endif %}
                                  </td>
                                {% else %}
                                  <td class="final-subm-id">
                                        &mdash;
                                  </td>
                                  <td class="created"></td>
                                  <td class="submit">
                                      <span class="label label-warning">No Backups</span>
                                  </td>
                                {% endif %}
                                <td>
                                    <a href="{{ url_for('.student_assignment_detail', cid=current_course.id, email=item['user']['email'], aid=assignment.id) }}">
                                        <button class="btn btn-xs btn-default btn-plain"> Edit </button>
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                            <!-- Include another header because list.js forces us to include this inside of the tbody -->
                            <div class="box-header">
                                <span>
                                    <div class="pull-left">
                                        <ul class="pagination pagination-md no-margin pull-right"></ul>
                                    </div>

                                    <div class="pull-right">
                                        <div class="input-group input-group-md" style="width: 200px;">
                                            <input type="text" name="query" class="form-control pull-right search" placeholder="Search">
                                            <div class="input-group-btn">
                                                <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </span>
                            </div>

                        </tbody>
                    </table>
                </div>
                <!-- /.box-body -->
                <div class="box-footer">
                    <div class="pull-left">
                    <h5 class="box-title"><span> Total: {{ submissions | length }} </span></h5>
                    </div>
                    <div class='pull-right'>
                      <div class="btn-group">
                        <button type="button" class="btn btn-default btn-sm" onclick="listIncreasePagination(submissionList, 50)">Show 50 more per page</button>
                        <button type="button" class="btn btn-default btn-sm" onclick="listIncreasePagination(submissionList, submissionList.items.length)">Show All</button>
                      </div>
                    </div>
                </div>

            </div>

          </div>
        </div>
        <!-- /.col -->
      </div>
  <!-- </body> do not close body in template-->
{% endblock %}

{% block page_js %}
<script>

    var submissionOptions = {
      valueNames: [ 'identifier', 'group', 'final-subm-id', 'created', 'submit',
                  { attr: 'data-email', name: 'email' },
                  { attr: 'data-name', name: 'name' },
                  { attr: 'data-time', name: 'time' }
                  ],
      plugins: [ListPagination()],
      page: 20,
      indexAsync: true,
    };
    var submissionList = new List('submissions-list', submissionOptions);
    submissionList.sort("data-time", {order: "desc"})
    document.getElementById('submissions-loading').style.display = 'none';
    document.getElementById('submissions-list').style.display = 'block';

</script>
{% endblock %}
